<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />

    <title>Demo Chat</title>

    <link href="/bootstrap.css" rel="stylesheet">

    <style>
        body {
            padding:20px;
        }
        #console {
            height: 400px;
            overflow: auto;
        }
        .username-msg {color:orange;}
        .connect-msg {color:green;}
        .disconnect-msg {color:red;}
        .send-msg {color:#888}
    </style>


    <script type="text/javascript" src="/socket.io.js"></script>
    <script src="/moment.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script>
        var clientid =  "socketio_namespace";
        var socket =  io.connect('http://localhost:9090?clientid='+clientid);
        //连接服务器成功执行
        socket.on('connect', function() {
            output('<span class="connect-msg">连接服务器成功!</span>');
        });

        //当服务器返回的数据，key为messageevent时执行
        socket.on('namespace', function(data) {
            output('<span class="username-msg">' + 'namespace房间'+data.sourceClientId + ':</span> ' + data.msgContent);
        });

        //断开服务器时执行
        socket.on('disconnect', function() {
            output('<span class="disconnect-msg">断开服务器成功!</span>');
        });

        //断开服务器
        function sendDisconnect() {
            socket.disconnect();
        }

        function sendMessage() {
            var message = $('#msg').val();
            $('#msg').val('');

            var jsonObject = {sourceClientId: clientid,
                targetClientId: clientid,
                msgType: 'chat',
                msgContent: message};

     //       socket.json.send();
            socket.emit('namespace', jsonObject);
        }

        function output(message) {
            var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
            $('#console').prepend(element);
        }

        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                $('#send').click();
            }
        });
    </script>
</head>

<body>

<h1>Netty-socketio Demo Chat</h1>

<br/>

<div id="console" class="well">
</div>
<form class="well form-inline" onsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder=""/>
    <button type="button" onClick="sendMessage()" class="btn" id="send">发送</button>
    <button type="button" onClick="sendDisconnect()" class="btn">退出</button>
</form>



</body>

</html>